<!DOCTYPE html>
<html lang="en">

<head>

    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <meta name="description" content="Meshblu - Octoblu's IoT Platform">
    <meta name="author" content="Octoblu">
    <link rel="shortcut icon" href="img/favicon.ico">

    <title>Meshblu - Octoblu's IoT Platform</title>

    <!-- Bootstrap core CSS -->
    <link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet" type="text/css">

    <!-- Custom fonts for this theme -->
    <link href='https://fonts.googleapis.com/css?family=Roboto:400,100,100italic,300,300italic,400italic,500,500italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
    <link href='https://fonts.googleapis.com/css?family=Raleway:400,100,200,300,600,500,700,800,900' rel='stylesheet' type='text/css'>

    <!-- Plugin CSS -->
    <link href="vendor/font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">
    <link href="vendor/owl-carousel/owl.carousel.css" rel="stylesheet" type="text/css">
    <link href="vendor/owl-carousel/owl.theme.css" rel="stylesheet" type="text/css">
    <link href="vendor/owl-carousel/owl.transitions.css" rel="stylesheet" type="text/css">
    <link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet" type="text/css">
    <link href="vendor/animate.css/animate.min.css" rel="stylesheet" type="text/css">
    <link href="device-mockups/device-mockups.min.css" rel="stylesheet" type="text/css">

    <link href="css/vitality-octo-green.css" rel="stylesheet" type="text/css">

    <!-- Temporary navbar container fix -->
    <style>
    .navbar-toggler {
        z-index: 1;
    }

    @media (max-width: 576px) {
        nav > .container {
            width: 100%;
        }
    }
    </style>

</head>

<body id="page-top">

    <!-- Navigation -->
    <nav class="navbar fixed-top navbar-toggleable-md navbar-inverse navbar-expanded" id="mainNav">
        <div class="container">
            <button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarResponsive" aria-controls="navbarResponsive" aria-expanded="false" aria-label="Toggle navigation">
                Menu <i class="fa fa-bars"></i>
            </button>
            <a class="navbar-brand page-scroll" href="#page-top">
                <img class="img-fluid" src="img/octoblu-inverse-spiral.png" alt="">MESHBLU
            </a>
            <div class="collapse navbar-collapse" id="navbarResponsive">
                <ul class="navbar-nav ml-auto">
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#about">About</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#team">Team</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#services">OpenSource</a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link page-scroll" href="#examples">Examples</a>
                    </li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Masthead -->
    <header class="masthead" style="background-image: url('img/battlebot.png');">
        <div class="container h-100">
            <div class="row h-100">
                <div class="col-12 my-auto text-center text-white">
                    <img class="masthead-img img-fluid mb-3" src="img/octoblu-inverse-spiral.png" alt="">
                    <div class="masthead-title">MESHBLU</div>
                    <hr class="colored">
                    <div class="masthead-subtitle">Octoblu's Open Source IoT Platform</div>
                </div>
            </div>
        </div>
        <div class="scroll-down">
            <a class="btn page-scroll" href="#about">
                <i class="fa fa-angle-down fa-fw"></i>
            </a>
        </div>
    </header>

    <!-- About Section -->
    <section class="page-section" id="about">
        <div class="container-fluid">
            <div class="wow fadeIn text-center">
                <h1>Think: Twitter + Firebase for IoT</h1>
                <p class="mb-0">Meshblu is a secure cross-protocol, machine-to-machine instant messaging platform with an open plugin architecture for connectors</p>
            </div>
            <hr class="colored"><br/><br/><br/>
            <div class="row text-center">
                <div class="col-lg-3 col-md-6">
                    <div class="wow fadeIn px-4 pb-4 pb-lg-0 h-100" data-wow-delay=".2s">
                        <i class="fa fa-comments-o fa-4x"></i>
                        <h3>Messaging</h3>
                        <p class="mb-0">Secure cross-protocol messaging platform with APIs supporting HTTP, WebSockets, MQTT, CoAP, AMQP, and XMPP.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="wow fadeIn px-4 pb-4 pb-lg-0 h-100" data-wow-delay=".4s">
                        <i class="fa fa-microchip fa-4x"></i>
                        <h3>Smart Devices</h3>
                        <p class="mb-0">Javascript-based open plugin architecture for connecting and communicating with any IoT device i.e. Phillips Hue, Nest, Wemo, etc.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="wow fadeIn px-4 h-100" data-wow-delay=".8s">
                        <i class="fa fa-thermometer-4 fa-4x"></i>
                        <h3>Streaming</h3>
                        <p class="mb-0">Realtime sensor and message event streaming to any datastore in any network i.e. Splunk, Mongo, Hadoop, etc.</p>
                    </div>
                </div>
                <div class="col-lg-3 col-md-6">
                    <div class="wow fadeIn px-4 pb-4 pb-lg-0 h-100" data-wow-delay=".6s">
                        <i class="fa fa-cloud fa-4x"></i>
                        <h3>REST APIs</h3>
                        <p class="mb-0">Javascript-based open plugin architecture for connecting and communicating with any REST API or SaaS service i.e. Slack, Twitter, Netscaler, etc.</p>
                    </div>
                </div>
            </div>
            <div class="row text-center">
                <div class="col-lg-6 col-md-6"><br/><br/><br/>
                    <div class="wow fadeIn px-4 pb-4 pb-lg-0 h-100" data-wow-delay=".2s">
                        <i class="fa fa-twitter fa-4x"></i>
                        <h3><br/>Twitter vs. Meshblu</h3><br/>
                        <p class="mb-0 text-left">
                          Twitter is designed for human communications. Meshblu is designed for machine communications.
                          Like Twitter, Meshblu allows machines to "follow" or subscribe to other machines messages.
                          Machines can "tweet" or broadcast messages to any other machine subscribed to its events.
                          Machines can "direct message" or private message one or more other machines.
                        </p><br/>
                        <p class="mb-0 text-left">
                          Like Twitter, Meshblu has a messaging firehose.
                          With the proper permissions, machines can "spy" on other machines or groups of machines and receive all events and messages related to a machine or group of machines.
                          Meshblu firehose data can stream directly into private datastores such as Splunk, Mongo, or even Hadoop.
                        </p><br/>
                        <p class="mb-0 text-left">
                          Unlike Twitter, Meshblu's communications between machines are encrypted with private/public keys.
                          Meshblu also institudes a set of whitelists and blacklists to determine which other machines are allowed (or not allowed) to discover, message, subscribe, and configure each machine.
                          In addition to HTTP protocol traffic, Meshblu has APIs for communicating with other IoT protocols including: WebSockets, MQTT, CoAP, AMQP, and XMPP. Machines speaking any of these protocols can communicate to any other machine connected to Meshblu regardless of protocol.
                        </p><br/>
                        <p class="mb-0 text-center">
                          <a class="btn btn-success" href="https://developer.octoblu.com/docs/api-guide" role="button">More Info</a>
                        </p><br/>
                    </div>
                </div>
                <div class="col-lg-6 col-md-6"><br/><br/><br/>
                    <div class="wow fadeIn px-4 pb-4 pb-lg-0 h-100" data-wow-delay=".2s">
                        <i class="fa fa-database fa-4x"></i>
                        <h3><br/>Firebase vs. Meshblu</h3><br/>
                        <p class="mb-0 text-left">
                          Meshblu has a built-in device directory.
                          Each machine, smart device, and REST API service is represented as a unique UUID in our device directory.
                          Each UUID in the device directory is basically a JSON document store allowing you to get and set properties, permissions, and even data associated with the UUID.
                        </p><br/>
                        <p class="mb-0 text-left">
                          The current state of each machine or device can also be stored in the device directory. This allows you to tell a device that it should be green rather than sending it a message to turn green.
                          Regardless if the message is received or missed, the smart device turns green as soon as the state is update and/or the device has Internet connectivity to read its state.
                        </p><br/>
                        <i class="fa fa-plug fa-4x"></i>
                        <h3><br/>Connectors</h3><br/>
                        <p class="mb-0 text-left">
                          Meshblu supports an open plugin architecture for connecting smart IoT devices and REST APIs / SaaS services to its messaging engine.
                          Once connected to Meshblu, our JSON Rules Engine can be used to automate events and messages based on state or messages received from these devices and services.
                          Our connectors are typically written in Javascript.
                        </p><br/>
                        <p class="mb-0 text-center">
                          <a class="btn btn-success" href="https://developer.octoblu.com/docs/connectors" role="button">Device Connectors</a>
                          <a class="btn btn-success" href="https://github.com/octoblu/generator-endo" role="button">REST Connectors</a>
                        </p><br/>

                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Team Section -->
    <section class="page-section bg-faded" id="team">
        <div class="container text-center wow fadeIn">
            <h2>Meet Team Octoblu</h2>
        </div>
    </section>

    <!-- Call to Action -->
    <section class="call-to-action" style="background-image: url('img/team2.png');">
        <div class="container wow fadeIn">
            <div class="row">
                <div class="col-md-10 offset-md-1">
                    <span class="quote">We are a group of like-minded  <span class="text-primary">geeks</span> brought together for the sole purpose of building <span class="text-primary">SkyNet!</span></span>
                    <!-- <hr class="colored">
                    <a class="btn btn-primary page-scroll" href="#services">How We Work</a> -->
                </div>
            </div>
        </div>
    </section>

    <!-- Services Section -->
    <section class="page-section services" id="services">
        <div class="container">
            <div class="text-center wow fadeIn">
                <h2>Open Source</h2>
                <hr class="colored">
                <p class="mb-0">Meshblu and its connectors are all open source on <i class="fa fa-github-alt"></i> <a href="https://github.com/octoblu/meshblu">Github</a>.</p>
                <br/><br/>
            </div>
            <div class="row mt-4">
                <!-- Service Item 1 -->
                <div class="col-lg-4 wow fadeIn" data-wow-delay=".2s">
                    <div class="media">
                        <div class="pull-left">
                            <i class="fa fa-comments-o rounded-circle"></i>
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">Protocols</h3>
                            <ul>
                                <li>HTTPS</li>
                                <li>WebSockets</li>
                                <li>MQTT</li>
                                <li>CoAP</li>
                                <li>AMQP</li>
                                <li>XMPP</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Service Item 2 -->
                <div class="col-lg-4 wow fadeIn" data-wow-delay=".4s">
                    <div class="media">
                        <div class="pull-left">
                            <i class="fa fa-rocket rounded-circle"></i>
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">Platform</h3>
                            <ul>
                                <li>NodeJS / Javascript / Go</li>
                                <li>100s of microservices</li>
                                <li>runs in Docker containers</li>
                                <li>scales via Docker Swarm</li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- Service Item 3 -->
                <div class="col-lg-4 wow fadeIn" data-wow-delay=".6s">
                    <div class="media">
                        <div class="pull-left">
                            <i class="fa fa-clipboard rounded-circle"></i>
                        </div>
                        <div class="media-body">
                            <h3 class="media-heading">Documentation</h3>
                            <ul>
                                <li><a href="https://meshblu.readme.io/">Platform Docs</a></li>
                                <li><a href="https://octoblu.readme.io/v1.0/docs/api-guide/">API Docs</a></li>
                                <li><a href="https://meshblu-connectors.readme.io/">Device Connector Docs</a></li>
                                <li><a href="https://github.com/octoblu/generator-endo">REST Connector Docs</a></li>
                                <li><a href="https://meshblu-forwarders.readme.io/">Data Streaming Docs</a></li>
                                <li><a href="https://meshblu.readme.io/docs/meshblu-utility">CLI Utility Docs</a></li>
                                <li><a href="https://octoblu.readme.io/">All Docs</li>
                            </ul>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </section>

    <!-- Portfolio Carousel Heading -->
    <section class="page-section bg-faded" id="examples">
        <div class="container text-center wow fadeIn">
            <h2>Examples</h2>
            <hr class="colored">
            <p>Here are a few examples on getting started with Meshblu.</p>
        </div>
    </section>

    <!-- Portfolio Carousel -->
    <div class="portfolio-carousel wow fadeIn owl-carousel owl-theme">

        <!-- Portfolio Carousel Item 1 -->
        <div class="item" style="background-image: url('img/particle-blinkytape.jpg')">
            <div class="container-fluid">
                <div class="row h-100">
                    <div class="col-md-5 push-md-7 my-auto">
                        <div class="project-details">
                            <span class="project-name">Getting IoT Devices to Talk</span>
                            <span class="project-description">IoT messaging example</span>
                            <hr class="colored">
                            <a href="https://www.hackster.io/virgilvox/meshblu-getting-iot-devices-to-talk-2f7c90" class="btn btn-primary">View Details <i class="fa fa-long-arrow-right fa-fw"></i></a>
                        </div>
                    </div>
                    <div class="col-md-7 pull-md-5 hidden-xs my-auto">
                        <div class="device-container">
                            <div class="device-mockup macbook portrait black">
                                <div class="device">
                                    <div class="screen">
                                        <img class="img-fluid" src="img/meshblu-code.jpeg" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

        <!-- Portfolio Carousel Item 2 -->
        <div class="item" style="background-image: url('img/keywall.jpg')">
            <div class="container-fluid">
                <div class="row h-100">
                    <div class="col-md-5 push-md-7 my-auto">
                        <div class="project-details">
                            <span class="project-name">Encrypt Your Payloads</span>
                            <span class="project-description">End-to-end public key encryption.</span>
                            <hr class="colored">
                            <a href="https://www.hackster.io/iamruinous/encrypt-your-octoblu-payload-6fa689?ref=channel&ref_id=2435_trending___&offset=24" class="btn btn-primary">View Details <i class="fa fa-long-arrow-right fa-fw"></i></a>
                        </div>
                    </div>
                    <div class="col-md-7 pull-md-5 hidden-xs my-auto">
                        <div class="device-container">
                            <div class="device-mockup macbook portrait black">
                                <div class="device">
                                    <div class="screen">
                                        <img class="img-fluid" src="img/crypto.png" alt="">
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>

    </div>

    <!-- Footer -->
    <footer class="footer" style="background-image: url('img/tempetownlake.jpg')">
        <div class="container text-center">
            <div class="row">
                <div class="col-md-6 footer-contact-details">
                </div>
                <div class="col-md-6 footer-contact-details">
                </div>
            </div>
            <div class="row footer-social">
                <div class="col-lg-12">
                    <ul class="list-inline">
                        <li class="list-inline-item">
                            <a href="https://www.facebook.com/octoblu/"><i class="fa fa-facebook fa-fw fa-2x"></i></a>
                        </li>
                        <li class="list-inline-item">
                            <a href="https://twitter.com/octoblu"><i class="fa fa-twitter fa-fw fa-2x"></i></a>
                        </li>
                        <li class="list-inline-item">
                            <a href="https://www.linkedin.com/company-beta/3745577/"><i class="fa fa-linkedin fa-fw fa-2x"></i></a>
                        </li>
                    </ul>
                </div>
            </div>
            <p class="copyright">&copy; 2017 Octoblu</p>
        </div>
    </footer>

    <!-- Bootstrap core JavaScript -->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/tether/tether.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.min.js"></script>

    <!-- Plugin JavaScript -->
    <script src="vendor/jquery.easing/jquery.easing.min.js"></script>
    <script src="vendor/owl-carousel/owl.carousel.js"></script>
    <script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
    <script src="vendor/vide/jquery.vide.min.js"></script>
    <script src="vendor/mixitup/mixitup.min.js"></script>
    <script src="vendor/wowjs/wow.min.js"></script>

    <!-- Contact form JavaScript -->
    <script src="js/contact_me.js"></script>
    <script src="js/jqBootstrapValidation.js"></script>

    <!-- Custom scripts for this theme -->
    <script src="js/vitality.js"></script>
    <script src="js/vitality-mixitup.js"></script>

</body>

</html>
